<template>
  <main>
    <header>
    <h3>饿了么</h3>
    <div class="toppic">
        <div class="top_left">
            <img src="../assets/1.jpg" alt="">
            <div class="name">
                <p>234dwre34</p>
                <p>136****2341</p>
            </div>
        </div>
        <button>账户设置</button>
    </div>
    <div class="eathuoka">
        <div class="eathuoka_left">
            <div class="eat_left_top">
                <span>吃货卡</span>
                <span>|</span>
                <span>吃货豆：</span>
                <span>1461</span>
            </div>
            <div class="eat_left_bottom">升级超级吃货卡，每月的无门槛红包，下单5倍反吃货豆</div>
        </div>
        <div class="eathuoka_right">></div>
    </div>
  </header>
  <div class="Plist">
    <div class="list_top">
      <div class="top_top">
        <div class="hongbao">
          <span class="iconfont">&#xe609;</span>
          <span>红包</span>
        </div>
        <p>7张今日到期</p>
      </div>
      <div class="top_top">
        <div class="hongbao">
          <span class="iconfont">&#xe609;</span>
          <span>余额</span>
        </div>
        <p>0元</p>
      </div>
    </div>
    <div class="list_center">
      <h3>常用工具</h3>
      <div class="changlist">
        <!-- <div class="changlist_list" :class="{ iconfont:true,[item.icon]:true}" v-for="(item,index) in list" :key="index" >
            <p><span class="iconfont"></span>{{item.name}}</p>
        </div> -->
        <div class="changlist_list" @click="shouhuoClick()">
            <span class="iconfont">&#xe609;</span>
             <p>我的地址</p>
        </div>
        <div class="changlist_list">
            <span class="iconfont">&#xe649;</span>
            <p>我的客服</p>
        </div>
        <div @click="shoucangClick()" class="changlist_list">
            <span class="iconfont">&#xe613;</span>
             <p>店铺关注</p>
        </div>
        <div class="changlist_list">
            <span class="iconfont">&#xe616;</span>
             <p>评价有礼</p>
        </div>
      </div>
    </div>
    <div class="list_bottom">
        <div class="list_bottom_left">
            <h4>邀请好友赚现金</h4>
            <p>最高的15元</p>
            <div class="imgs"><img src="../assets/1.jpg" alt=""></div>
            <div class="btns">
                <button>去邀请</button>
                <button>查佣金</button>
            </div>
        </div>
        <div class="list_bottom_left">
            <h4>饿了么服务号</h4>
            <p>关注后及时接收系统通知</p>
            <div class="imgs"><img src="../assets/1.jpg" alt=""></div>
            <div class="btns">
                <button>立即关注</button>
            </div>
        </div>
    </div>
  </div>
  </main>
</template>

<script setup>

</script>

<style scoped>
header{
    margin: 0 auto;
    height: 25vh;
    width: 96vw;
    box-sizing: border-box;
}
 header h3{
    padding-top: 1vh;
    margin-left: 1vw;
}
header .toppic{
    height: 8vh;
    width: 96vw;
    display: flex;
    margin: 1vh auto;
    align-items: center;
    justify-content: space-between;
}
header .toppic .top_left{
    display: flex;
    align-items: center;
    
}
header .toppic .top_left img{
    width:15vw;
    border-radius: 50%;
    vertical-align:middle;
    margin-right: 2vw;
}
header .toppic .top_left .name p:nth-child(1){
    font-weight: 700;
}
header .toppic .top_left .name p:nth-child(2){
   font-size: 12px;
   color: gray;
}
header .toppic button{
    width: 20vw;
    height: 4vh;
    border-radius: 25px;
    background-color: transparent;
    border: 1px solid gray;

}
header .eathuoka{
    margin: 0 auto;
    background-color: rgb(36, 188, 247);
    border-radius: 5px;
    height: 10vh;
    width: 96vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 12px;
    color: white;
}
header .eathuoka .eathuoka_left .eat_left_top{
    display: flex;
    align-items: center;
}
header .eathuoka .eathuoka_left .eat_left_top span{
    text-align: center;
    margin-right: 2vw;;
}
header .eathuoka .eathuoka_left .eat_left_top span:nth-child(1){
    font-size: 20px;
    font-style:oblique;
}
header .eathuoka .eathuoka_left .eat_left_top span:nth-child(2){
    font-size: 20px;
}
header .eathuoka .eathuoka_left .eat_left_top span:nth-child(4){
    font-size: 20px;
}
.Plist{
    margin: 0 auto;
    width: 96vw;
    height: 63vh;
    box-sizing: border-box;
}
.Plist .list_top{
    height: 10vh;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    margin: 2vh auto;
    display: flex;
    justify-content: space-around;

}
.Plist .list_top .top_top{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

}

.Plist .list_top .top_top .hongbao{
    display: flex;
    align-items: center;
}
.Plist .list_top .top_top .hongbao .iconfont{
    font-size: 18px;
    color: red;
    margin-right: 2vw;
}
.Plist .list_top .top_top p{
    font-size: 12px;
    color: gray;
}
.Plist .list_center{
    width: 96vw;
    height: 15vh;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    margin: 2vh auto 0;
}
.Plist .list_center .changlist{
    display: flex;
    justify-content:space-around;
}
.Plist .list_center .changlist .changlist_list{
    display: flex;
    flex-direction: column;
    justify-content:space-around;
    align-items: center;
}
.Plist .list_center .changlist .changlist_list p{
    font-size: 14px;
}
.Plist .list_center .changlist .iconfont{
    font-size: 25px;
    margin: 1vh auto;
}
.Plist .list_center .changlist p{
    font-size: 20px;
}
h3{
    margin: 2vw;
}
img{
    vertical-align:middle;
    width: 16vw;
}
.list_bottom {
    height: 30vh;
    margin: 2vh auto;
    display: flex;
    justify-content: space-around;
}
.list_bottom .list_bottom_left{
    width: 46vw;
    border-radius: 5px;
    background-color: white;
    height: 30vh;
}
.list_bottom .list_bottom_left h4{
    margin: 1vh auto;
    margin-left: 1vw;
}
.list_bottom .list_bottom_left p{
    margin-left: 1vw;
    font-size: 14px;
    color: rgb(190, 190, 190);
}
.list_bottom .list_bottom_left .imgs{
    width: 42vw;
    height: 14vh;
    margin: 0 auto;
    text-align: center;
    line-height: 14vh;
    background-color: rgb(218, 218, 218);
}
.list_bottom .list_bottom_left .btns{
    margin: 0 auto;
    width: 42vw;
    height:7vh ;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-around;
}
.list_bottom .list_bottom_left button{
    height: 5vh;
    line-height: 5vh;
    width: 20vw;
    text-align: center;
    background: transparent;
    border: 1px solid gray;
    border-radius: 15px;
}
</style>